<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数节流</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        #box {
            margin: 200px auto;
            width: 500px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            background-color: antiquewhite;
        }
    </style>
</head>

<body>
    <div id="box">数字大小为：0</div>
    <!-- <button id="btn">点击让数字加1</button> -->
    <script>
        var box = document.querySelector('#box')
        // var btn  = document.querySelector('#btn')
        var number = 0;

        function increment() {
            number++
            box.innerHTML = '数字大小为' + number;
        }
        /* 函数节流
        handle:thorttle函数
        wait:规定在2秒钟内只能执行一次
        意义在减少函数函数执行次数，
    */
        function thorttle(handle, wait) {
            let lastTime = 0
            return function (e) { // 创建闭包环境
                let nowTime = new Date().getTime();
                if (nowTime - lastTime > wait) {
                    handle()
                    lastTime = nowTime;

                }
                console.log('现在移入一时间：' + nowTime);

                console.log('移入时间间隔：' + (nowTime - lastTime))
            }
        }
        box.onmouseenter = thorttle(increment, 2000)
    </script>
</body>

</html>